<template>
  <!-- 业务员提成-提成单详情 主组件 -->
  <zm-panel
    title="提成单详情"
    :visible.sync="value"
    class="panelContainer"
    :show-footer="false"
    :before-close="onCancel"
  >
    <zm-tabs v-model="active">
      <el-tab-pane label="概况信息" name="first">
        <!-- 业务员提成-提成单详情-概况信息 -->
        <div class="ProfileInformation">
          <zm-form inline size="small">
            <div class="ProfileInformation-headInfo">
              <zm-form-item label>
                <zm-data-select
                  v-model="currentMonth"
                  :list="CommissionMother"
                  class="w200"
                  @change="changeMonth"
                  :clearable="false"
                ></zm-data-select>
              </zm-form-item>
              <zm-button class="fr"
                @click="isOpen()"
                size="medium"
                v-if="infoObj.status === '0' || infoObj.status === '3'"
                >
                {{infoObj.status === "0" ? "业绩核算" : "申诉处理完成"}}
              </zm-button>
            </div>
            <h4>基本信息</h4>
            <basic-information :info-obj="infoObj"></basic-information>
            <h4>回款详情</h4>
            <receivable-detail v-if="infoObj.salemanId" :month="currentMonth" :info-obj="infoObj" @getVerifyDate="getVerifyDate"></receivable-detail>
          </zm-form>
          <!-- 按钮弹窗组件 -->
          <confirmation-pop
            v-if="visible"
            :params="params"
            :verify-date="verifyDate"
            @onCancel="popCancel"
            @closeDetailDialog="backHome"
          ></confirmation-pop>
        </div>
      </el-tab-pane>
      <el-tab-pane label="操作日志" name="second">
        <operation-log :performance-id="detailInfo.performanceId"></operation-log>
      </el-tab-pane>
    </zm-tabs>
  </zm-panel>
</template>

<script>
import { getInfo, getCommissionMother } from '@/api/src/salesmanCommission'
import panelMixin from '@/mixins/panelMixin'
import OperationLog from './operationLog/index.vue'
import BasicInformation from './profileInformation/BasicInformation.vue'
import ReceivableDetail from './profileInformation/ReceivableDetail.vue'
import ConfirmationPop from './profileInformation/ConfirmationPop.vue'
import tableMixin from '@/mixins/zmTableMixin'
export default {
  components: { OperationLog, BasicInformation, ConfirmationPop, ReceivableDetail },
  mixins: [panelMixin, tableMixin],
  props: {
    detailInfo: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      active: 'first',
      infoObj: {},
      visible: false,
      CommissionMother: [], // 有效月份列表
      currentMonth: '' // 月份
    }
  },
  computed: {
    params () {
      return {visible: this.visible, obj: this.infoObj, month: this.currentMonth}
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getDetailInfo()
      this.getCommissionMotherColumn()
      this.currentMonth = this.detailInfo.month
    },
    onCancel () {
      this.$emit('onCancel', false)
    },
    async getDetailInfo () {
      this.infoObj = await getInfo(this.detailInfo)
    },
    async getCommissionMotherColumn () {
      this.CommissionMother = await getCommissionMother({salesmanId: this.detailInfo.id})
    },
    popCancel (val) {
      this.visible = val
    },
    isOpen () {
      let flag = this.verifyDate.every(item => {
        return !(isNaN(item.verifyPrice))
      })
      if (flag) {
        this.visible = true
      } else {
        this.$message.error('请填写完整的核发提成再提交！')
      }
    },
    async changeMonth () {
      this.infoObj = await getInfo({id: this.detailInfo.id, month: this.currentMonth, performanceId: this.detailInfo.performanceId})
    },
    getVerifyDate (verifyDate, allverifyPrice) {
      this.verifyDate = verifyDate
      this.infoObj.verifyPrice = allverifyPrice
    },
    backHome () {
      this.onCancel()
      this.$emit('refreshPage')
    }
  }
}
</script>

<style lang="scss" scoped>
.ProfileInformation{
  .ProfileInformation-headInfo{
    height: 70px;
    width: 100%;
    padding: 15px 30px;
    background-color: #f2f2f2;
  }
}
</style>
